<template>
  <div>
    <div class="togglebox">

      <div class="problemTitle">
        <img src="../assets/箭头.png" alt="" onclick="history.go(-1)">
        <p>临时提额常见问题</p>
        <p></p>
      </div>


      <input id="toggle1" type="radio" name="toggle" />
      <label for="toggle1">1.什么是临时提额，如何提升和使用？</label>

      <section id="content1">
        <p>
          临时提额是取点花推出的一种提额方式，目前仅对部分用户开放。当您的额度不够时，支付少量信用评估费用即可提升临时额度。<br><br>在取点花申请提现时优先使用您的固定额度，固定额度不足再使用您的临时额度。临时额度在有效期内可享受循环额度。
        </p>
      </section>

      <input id="toggle2" type="radio" name="toggle" />
      <label for="toggle2">2.临时提额有效期是多久？</label>

      <section id="content2">
        <p>
          临时额度存在30天有效期，在超过有效期后，您的可用额度也会随之减少，建议提升后尽快使用。
        </p>
      </section>

      <input id="toggle3" type="radio" name="toggle" />
      <label for="toggle3">3.使用的临时额度什么时候还款？</label>

      <section id="content3">
        <p>
          临时额度的有效日期和还款时间没有关系，您只需根据还款日按时还账单的金额即可。
        </p>
      </section>

      <input id="toggle4" type="radio" name="toggle" />
      <label for="toggle4">4.是否有特殊渠道提升临时额度？</label>

      <section id="content4">
        <p>
          取点花提醒您，提升临时额度没有任何“特殊渠道”，向您索取身份信息、账号密码、收取费用的人都是骗子！请勿相信！如有疑问请致电取点花官方客服电话
        </p>
      </section>

      <input id="toggle5" type="radio" name="toggle" />
      <label for="toggle5">5.我操作还款，临时额度会恢复吗？</label>

      <section id="content5">
        <p>
          1）临时额度未过期：还款后会优先恢复临时额度。 还款后有可能临时额度已过期，则不会恢复临时额度。<br><br>
          2）临时额度已过期（自购买之日开始算起，临时额度有效期为30天）：您还款后临时额度不会再恢复，并且需要您把临时额度还完后，才会陆续恢复您的固定额度。 
        </p>
      </section>

      <input id="toggle7" type="radio" name="toggle" />
      <label for="toggle7">6.临时额度可以提升几次呢？</label>

      <section id="content7">
        <p>
          申请临时额度没有次数限制哦，具体是由系统进行综合评估判断的，进入首页查看是否有临时提额入口 ，若无则不支持临时提额，建议亲保持良好的还款记录和个人信用记录，对额度的提升是有帮助的。
        </p>
      </section>

      <input id="toggle8" type="radio" name="toggle" />
      <label for="toggle8">7.临时额度已达上限什么意思？</label>

      <section id="content8">
        <p>
          如提示您临时额度已达上限的话，说明您的额度已经提完了，建议您按时还款之后可再次申请提额。
        </p>
      </section>

    </div>

  </div>
</template>

<script>
  export default {

    name:'CommonProblem',

    data() {
      return {
        CommonProblemTocken:'',
        message:"CommonProblem",

      }
    },
    created() {
      var that = this;
      that.CommonProblemTocken = sessionStorage.getItem('AuthToken');
    },
    methods: {
      click() {}
    },
//   components: {
//     AppHeader
//   }
  }
</script>


<style lang="scss" scoped>
  /*@import '../../static/css/font-awesome.min.css';*/
  * {
    margin: 0;
    padding: 0;
    text-align: left;
  }

  *, *:before, *:after {
    box-sizing: border-box;
  }

  html, body {
    height: 100%;
    font: 13px/1 'Open Sans', sans-serif;
    color: #555;
    background: #fff;
  }

 .problemTitle{
   width:100%;
   height: auto;
   display: flex;
   justify-content: space-between;
   img{
     width: 2rem;
     height: 2rem;
     display: inline-block;
     position: relative;
     top: 1rem;
     left: 1rem;
   }
   p{
     height: 2rem;
     line-height: 2rem;
     text-align: center;
     font-size: 1.6rem
   }
 }

  .togglebox {
    width: 100%;
    margin: 0 auto;
    background: #fff;
    transform: translateZ(0);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  input[type="radio"] {
    position: absolute;
    opacity: 0;
  }

  label {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 13px;
    /*font-weight: 700;*/
    border-top: 1px solid #ddd;
    background: #fff;
  }

  label[for*=''] {
    border: 0;
  }

  label:after {
    -webkit-text-stroke: 1px white;
    content: '\f054';
    position: absolute;
    top: 0px;
    right: 20px;
    font-family: fontawesome;
    transform: rotate(0deg);
    transition: .3s transform;
  }

  section {
    height: 0;
    transition: .0s all;
    overflow: hidden;
  }

  #toggle1:checked ~ label[for*='1']:after,
  #toggle2:checked ~ label[for*='2']:after,
  #toggle3:checked ~ label[for*='3']:after,
  #toggle4:checked ~ label[for*='4']:after,
  #toggle5:checked ~ label[for*='5']:after,
    /*#toggle6:checked ~ label[for*='6']:after,*/
  #toggle7:checked ~ label[for*='7']:after,
  #toggle8:checked ~ label[for*='8']:after,
  #toggle9:checked ~ label[for*='9']:after,
  #toggle10:checked ~ label[for*='10']:after,
  #toggle11:checked ~ label[for*='11']:after {
    transform: rotate(90deg);
  }

  #toggle1:checked ~ #content1,
  #toggle2:checked ~ #content2,
  #toggle3:checked ~ #content3,
  #toggle4:checked ~ #content4,
  #toggle5:checked ~ #content5,
    /*#toggle6:checked ~ #content6,*/
  #toggle7:checked ~ #content7,
  #toggle8:checked ~ #content8,
  #toggle9:checked ~ #content9,
  #toggle10:checked ~ #content10,
  #toggle11:checked ~ #content11 {
    height: 100%;
    background: #9694941f;
  }

  p {
    margin: 15px 0;
    padding: 0 20px;
    font-size: 13px;
    line-height: 1.5;
  }
</style>
